<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){

            //获取到图形容器 画布
            var canvas = document.getElementById('canvas');

            //返回一个能够调用js绘图方法的对象 绘图环境(2d);
            //上下文
            var ctx = canvas.getContext('2d');

            //1画一条线  (两点)
            ctx.lineWidth = 2;//线宽
            ctx.strokeStyle = '#888888';//设置画笔颜色

            ctx.moveTo(20,20);//起点  (x,y)坐标
            ctx.lineTo(100,200);//终点

            ctx.stroke();//画 填充边框
            //ctx.lineTo(100,100);
            //ctx.stroke();
            ctx.closePath();//关闭路径

           /* //2通过画线来画矩形
            ctx.beginPath();//开启新路径
            ctx.lineWidth = 2;
            ctx.strokeStyle = '#888888';//设置画笔颜色
            ctx.moveTo(20,100);
            ctx.lineTo(20,200);
            ctx.lineTo(80,200);
            ctx.lineTo(80,100);
            ctx.lineTo(20,100);
            ctx.stroke();//画
            ctx.closePath();//关闭路径*/

            //3画矩形
            ctx.beginPath();
            ctx.rect(100,100,100,100);
            // (<左上角坐标>100,100,宽100, 高100)
            ctx.stroke();//画 填充边框
            ctx.closePath();

            //实心矩形
            ctx.beginPath();
            ctx.rect(210,100,100,100);
            ctx.fillStyle = 'pink';
            ctx.fill();//画 填充满
            ctx.closePath();

            //画矩形 最简单//用的最多
            ctx.strokeRect(320,100,100,100);
            ctx.fillRect(430,100,100,100);

            //4画圈 圆形
            //0---360
            //0--2π
            ctx.beginPath();
            //(x,y,r,开始角度,结束角度<顺>,画弧度的顺逆)
            ctx.arc(100,300,50,0,Math.PI*2,false);
            ctx.fill();// 一条线使闭合 填充
            ctx.closePath();

            //5三角形
            ctx.beginPath();
            //用线画

           /* //6画文字
            ctx.font = "60px 宋体"
            ctx.lineWidth = 1;
            //ctx.strokeText('大帅哥',100,400);
            ctx.fillText('大帅哥',100,400);*/

            //7画图片
            /*var img = new Image();//创建图片对象
            img.src = 'bb.jpg';
            //图片加载完成后执行画图片
            img.onload = function(){
                //(img,x,y) 原始图片大小
                //(img,x,y,width,height)
                //(img,imgx,imgy,imgW,imgH,x,y,width,height)
                ctx.drawImage(img,0,0,420,435,100,500,400,300);
            }

            //清除一个矩形内的东西
            ctx.clearRect(0,0,800,1000);
        */
            }

    </script>



</head>
<body>
<!--标签定义一个图形-->
<!--canvas只是一个图形容器-->
<!--canvas对应有js的绘图api-->
<!--如果要绘图 html中只需要一个canvas 设置宽高(标签属性) -->
<canvas width="800" height="1000"
        style ="background-color: antiquewhite"
        id="canvas">
</canvas>

</body>
</html>